<!--  -->
<template>
  <div  >
    <div class="img">
      <!-- <img :src="dataItem.change_thumb" :style="{height:`${imgHeight}px`}"/> -->
      <van-image
        width="100%"
        :height="imgHeight + 'rem'"
        :src="dataItem.change_thumb"
      />
    </div>
    <slot name="content">
      <div class="goods-desc flex flex-j-sb">
        <slot name="title">
          <h3 class="ell">{{ dataItem.title  }}</h3>
        </slot>
        <div class="goods_content_show" v-if="dataItem.goods_content_show">
          <!--商品内容显示 #81889-->
          <template v-for="(contentChild, contentChild_index) in dataItem.goods_content_show">
            <div style="color: #6E6E79;font-size: 13px;" :key="contentChild_index">{{ contentChild.name }}{{ contentChild.value }}%</div>
          </template>
        </div>
        <p class="p-6"></p>
        <slot name="price">
          <p class="pl" v-if="fun.isTextEmpty(dataItem.goods_show)">{{ $i18n.t("money") }}{{ dataItem.price }}</p>
          <div v-else>
              <block v-for="(goodsItem, goodsIndex) in dataItem.goods_show" :key="goodsIndex">
                <p class="pl" >{{ goodsItem.name }}:{{ goodsItem.value }}</p>
              </block>
          </div>
          <!-- <div class="show_price_box" v-if="!fun.isTextEmpty(good.goods_show)">
            <div class="show_price" :class="[i % 2 == 0 ? 'red_white' : 'white_red']" v-for="(item, i) in good.goods_show" :key="i">{{ item.name }}:{{ item.value }}</div>
          </div> -->
        </slot>
      </div>
    </slot>
    
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Image as VanImage } from "vant";
export default {
  name: "rectangleGoods",
  props: ["dataItem", "index","imgHeight"],
  //import引入的组件需要注入到对象中才能使用
  components: {
    VanImage,
  },
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.p-6 {
  padding-bottom: 6px;
}
::v-deep .van-image .van-image__img{
  border-radius: 10px 10px 0 0 ;
}
::v-deep .van-image__error {
  border-radius: 10px 10px 0 0;
}
.pl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ell {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数 */
  overflow: hidden;
}

/* @import url(); 引入公共css类 */
.goods-item {
  .img {
    position: relative;

    // img {
    //   width: 100%;
    //   height: 96px;
    //   border-radius: 10px 10px 0 0;
    //   display: block;
    // }

    .img-tag {
      color: #fff;
      font-size: 12px;
      line-height: 12px;
      left: 0;
      bottom: 0;
      position: absolute;
      padding: 4px 6px;
      border-radius: 0 6px 0 0;
      background-color: rgba($color: #000, $alpha: 0.7);
    }
  }
  .goods_content_show {
    text-align: left;
    padding:5px 0 0 0;
  }
  .goods-desc {
    padding: 8px 7px 12px 7px;
    flex-direction: column;
    h3 {
      font-weight: 500;
      font-size: 14px;
      color: #00001C;
      line-height: 18px;
      text-align: left;
    }

    p {
      font-weight: bold;
      font-size: 16px;
      color: #F15353;
      text-align: left;
    }
    // .red_white {
    //   color: #fff;
    //   background: #ff2c29;
    //   margin-right: 5px;
    // }

    // .white_red {
    //   color: #ff2c29;
    //   background: #fff;
    // }
  }
}
</style>
